{% extends "layout.html" %}

{% block title %}Archival storage{% endblock %}
{% block h1 %}Archival storage{% endblock %}
{% block page_id %}archival-storage{% endblock %}

{% block css %}
  <style type="text/css">

    td, th {
      border: 1px solid #eee;
      text-align: left;
    }

    th > a.selected {
      color: Black;
    }

    thead > tr > th {
      background-color: #ddd;
    }

    td.link-sip > a {
      background: transparent url(/media/images/icons/package_go.png) no-repeat 0% 50%;
      padding-left: 22px;
      height: 16px;
      display: block;
    }

    td.uuid {
      font-family: "Courier New", Courier, "Lucida Console", monospace;
    }

    th > div {
      position: relative;
    }

    th > div > a {
      display: block;
      text-indent: -10000px;
      position: absolute;
      width: 16px;
      height: 16px;
    }

    th > div > a.up {
      background: transparent url(/media/images/bullet_arrow_up.png) no-repeat 0% 0%;
      top: -8px;
      right: -4px;
    }

    th > div > a.down {
      background: transparent url(/media/images/bullet_arrow_down.png) no-repeat 0% 0%;
      top: 6px;
      right: -4px;
    }

    th > div > a.selected_up {
      background-image: url(/media/images/bullet_orange.png);
    }

    th > div > a.selected_down {
      background-image: url(/media/images/bullet_orange.png);
    }

    tbody > tr:last-child > td {
      border-bottom: 2px solid #ddd;
    }

    tfoot > tr > td {
      border: 0px;
    }

    td.size {
      text-align: right;
    }

  </style>
{% endblock %}

{% block js %}
  <script type="text/javascript">
    $(document).ready(function()
      {

      });
  </script>
{% endblock %}

{% block content %}
  {% if sips %}
    <table>
      <thead>
        <th>
          <div>
            AIP
            <a class="up {% if order_by == 'name' and sort_by == 'up' %} selected_up{% endif %}" href="?order_by=name&sort_by=up">Sort</a>
            <a class="down {% if order_by == 'name' and sort_by == 'down' %} selected_down{% endif %}" href="?order_by=name&sort_by=down">Sort</a>
          </div>
        </th>
        <th>
          <div>
            Size
            <a class="up {% if order_by == 'size' and sort_by == 'up' %} selected_up"{% endif %}" href="?order_by=size&sort_by=up">Sort</a>
            <a class="down {% if order_by == 'size' and sort_by == 'down' %} selected_down"{% endif %}" href="?order_by=size&sort_by=down">Sort</a>
          </div>
        </th>
        <th>
          <div>
            UUID
            <a class="up {% if order_by == 'uuid' and sort_by == 'up' %} selected_up"{% endif %}" href="?order_by=uuid&sort_by=up">Sort</a>
            <a class="down {% if order_by == 'uuid' and sort_by == 'down' %} selected_down"{% endif %}" href="?order_by=uuid&sort_by=down">Sort</a>
          </div>
        </th>
        <th>
          <div>
            Date
            <a class="up {% if order_by == 'date' and sort_by == 'up' %} selected_up{% endif %}" href="?order_by=date&sort_by=up">Sort</a>
            <a class="down {% if order_by == 'date' and sort_by == 'down' %} selected_down"{% endif %}" href="?order_by=date&sort_by=down">Sort</a>
          </div>
        </th>
      </thead>
      <tbody>
        {% for item in sips %}
          <tr>
            <td class="link-sip"><a href="{% url main.views.archival_storage item.href %}">{{ item.name }}</a></td>
            <td class="size">{{ item.size }} MB</td>
            <td class="uuid">{{ item.uuid }}</td>
            <td>{{ item.date }}</td>
          </tr>
        {% endfor %}
      </tbody>
      <tfoot>
        <tr>
          <td>&nbsp;</td>
          <td colspan="3">
            <span>{{ total_size }}</span> MB
          </td>
        </tr>
      </tfoot>
    </table>
  {% else %}
    <p>Archival storage is empty.</p>
  {% endif %}
{% endblock %}
